<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px" class="layout_slider" :class="{ fold: this.LayOutStore.fold ? true : false }">
        <el-scrollbar class="scrollbar">
          <el-menu :default-active="this.onroute" background-color="#rgb(51 51 51)" height="100vh" text-color="white"
            :router="true" :collapse="this.LayOutStore.fold ? true : false" :collapse-transition="false">

            <Menu :menuList="this.useinfo.menuRoutes"></Menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <!-- 页头 -->
        <el-header class="layout_tabbar">
          <Haeder></Haeder>
        </el-header>
        <!-- 展示区 -->
        <el-main class="layout_main" :class="{ main: this.LayOutStore.fold ? true : false }">
          <Tabbar></Tabbar>
          <router-view v-if="this.flag"></router-view>
        </el-main>
        <!-- 页脚 -->
        <!-- <el-footer class="layout_footer">Footer</el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>
    
<script lang="ts" >
import { useRoute } from 'vue-router';
//引入info仓库的数据
import { useInfo } from '@/store/modules/info';
//引入菜单组件
import Menu from '@/layout/menu/index.vue';
//引入导航栏组件
import Tabbar from '@/layout/tabbar/tabbar.vue';
import Haeder from '@/layout/tabbar/index.vue';
import userLayOutStore from '@/store/modules/layout';
import {ref, nextTick } from 'vue';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'index',
  data() {
    const useinfo = useInfo();
    const $route = useRoute();
    const LayOutStore = userLayOutStore();
    const flag=ref(true);
    return {
      useinfo,
      $route,
      LayOutStore,
      flag,
    };
  },
  methods: {

  },
  components: {
    Haeder,
    Menu,
    Tabbar,
  },
  computed: {
    onroute() {
      const { meta, path } = this.$route;
      if (meta.acticemenu)
        return meta.acticemenu;
      return path;
    }
  },
  watch: {
    'LayOutStore.refsh':{
      deep:true,
      handler(){
        this.flag = false;
      nextTick(() => {
        this.flag = true;
      })
      } 
    }
  }

}


</script>
    
<style scoped>
.el-aside {
  background: primary-color;
  transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;
}


el-menu-item {
  border: 1px;
}

.common-layout {
  border: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
  background: white;
}

.layout_slider {
  /* 可自修改样式 */
  width: 201px;
  height: 100vh;
  background: rgb(51 51 51);
  position: fixed;
  top: 70px;
  overflow: hidden;
  transition: all 0.2s;
}

.scrollbar {
  width: 100%;
  height: calc(100vh - 70px);
}

.layout_tabbar {
  width: 100%;
  height: 70px;
  position: fixed;
  padding: 0%;
}

.layout_main {
  position: fixed;
  top: 70px;
  left: 200px;
  width: calc(100% - 200px);
  height: calc(100vh - 70px);
  background: white;
  overflow: auto;
  padding: 0%;

}

.main {
  width: calc(100vw - 50px);
  left: 50px;
}

.fold {
  width: 50px;
}
</style>
    